<template>
  <div>
    
    <van-collapse v-model="activeNames">
      <!-- 未完成 -->
      <van-collapse-item title="未完成" name="1">
        <div
          class="todoc"
          v-for="t in $store.state.todolist"
          :key="t._id"
          v-show="t.status == 0"
          :style="{ background: cd }"
        >
          <input
            type="checkbox"
            name=""
            id=""
            @click="t0(t._id)"
            :checked="t.status"
          />
          <span>{{ t.title }}</span>
          <v-button @click="qu(t._id)">取消</v-button>
        </div>
      </van-collapse-item>

      <!-- 已完成 -->
      <van-collapse-item title="已完成" name="2">
        <div
          class="todoc"
          v-for="(t, i) in $store.state.todolist"
          :key="i"
          v-show="t.status == 1"
          :style="{ background: cd }"
        >
          <input
            type="checkbox"
            name=""
            id=""
            @click="t1(t._id)"
            :checked="t.status"
          />
          <span>{{ t.title }}</span>
          <!-- 时间 -->
          <span>{{ t.Time }}</span>
        </div>
      </van-collapse-item>

      <!-- 已取消 -->
      <van-collapse-item title="已取消" name="3">
        <div
          class="todoc"
          v-for="(t, i) in $store.state.todolist"
          :key="i"
          v-show="t.status == 2"
          :style="{ background: cd }"
        >
        <v-button  @click="shan(t._id)" size="mini">删除</v-button>
          <span>{{ t.title }}</span>
          <v-button @click="hf(t._id)">恢复</v-button>
        </div>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>

<style lang="scss"></style>

<script>
export default {
  props: ["cd"],
  data() {
    return {
      activeNames: ["1"], 
    };
  },
  methods: {
    // 删除
    shan(id) {
      this.$emit("shan", id);
    },
    qu(id) {
      this.$store.commit("qu", id);
    },
    //恢复
    hf(id) {
      this.$store.commit("hf", id);
    },
    //  （未完成 0）改（已完成 1）
    t0(id) {
      this.$store.commit("t0", id);
    },
    //  （已完成 1）改（未完成 0）
    t1(id) {
      this.$store.commit("t1", id);
    },
  },
};
</script>

<style lang="scss" scoped>
.todoc {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  padding: 0 10px;
  border: 1px #f39894 solid;
  margin-bottom: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-weight: bold;
}
button {
  color: #000;
}
</style>
